<template>
  <view class="main-container" style="background-color: #dd302c;">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="nav-left" @tap="handleBack">
        <u-icon name="arrow-left" color="#FFF" size="20"></u-icon>
      </view>
      <view class="nav-title">人工智能易学大模型</view>
      <view class="nav-right" @tap="handleBack">
        <u-icon name="close" color="#FFF" size="20"></u-icon>
      </view>
    </view>
    <!-- 用户信息区 -->
    <view class="user-info-area">
      <view class="user-name-row">
        <text class="user-name" v-if="otherHehunUserInfo.length > 0">{{ otherHehunUserInfo[0].userName }}和{{
          otherHehunUserInfo[1].userName }}的合婚报告</text>
        <!-- <view class="user-action-buttons">
          <view class="action-button" @tap="handleReport">
            <image src="/static/images/icon-return.png" class="action-icon"></image>
            <text class="action-text">测算报告</text>
          </view>
        </view> -->
      </view>
      <view class="user-score">{{ overallScore }}</view>
    </view>

    <!-- 功能卡片区域 -->
    <view class="function-cards">
      <view class="function-card" v-for="(human, index) in otherHehunUserInfo">
        <view class="card-header">
          <view class="category-icon"></view>
          <text class="card-title">{{ human.gender }}方 {{ human.userName }} </text>
        </view>
        <view class="card-content">
          <template v-for="item in cardList">
            <view class="card-item">
              <text class="card-label">{{ item.label }}:</text>
              <text class="card-value">{{ human[item.value] }}</text>
            </view>
          </template>
        </view>
      </view>
    </view>

    <view class="box-content ">
      <view class="feature-section ">
        <view class="tabs-container">
          <view class="tabs-row">
            <view v-for="(tab, index) in displayHehunResultInfo" :key="index" class="tab"
              :class="{ 'active': currentMarriageTab === index }" @tap="changeMarriageTab(index)">
              {{ tab.name }}
              <view class="tab-underline" :class="{ 'active': currentMarriageTab === index }"></view>
            </view>
          </view>
          <view v-for="(item, index) in displayHehunResultInfo[currentMarriageTab].content">
            <view class="section-title">
              <view class="section-title-bar">
                <text class="section-title-text">{{ item.title }}</text>
                <text class="section-title-text" style="color: #e04441;">{{ item.fenshu }}分</text>
              </view>
              <view>
                <text class="section-title-text">满分:</text>
                <text class="section-title-text" style="color: #e04441;">{{ item.title!='八字相合'? '10分':'40分' }}</text>
              </view>
            </view>
            <view class="tab-item-content">{{ item.content }}</view>
          </view>
        </view>
      </view>
    </view>


    <!-- 底部信息 -->
    <view class="footer-info">
      <text class="sub-text">本站所有测试项目，均由AI大模型根据传统易学八字自动测算，如有雷同，纯属巧合。测算结果不作为您真正的人生指导策划，仅作娱乐参考!某些民俗占卜，仅作研究之用，请勿迷信!</text>
    </view>

    <!-- 客服助手 -->
    <floating-image ref="floatingImage" />
    <floating-report ref="report"  />
  </view>
</template>


<script>
import { getHehunResultInfo, getHehunUserInfo } from '@/api/fortune';
import { mapGetters } from 'vuex';
import { mapActions } from 'vuex';
import { trackPageView, trackButton } from '@/utils/track';

export default {
  name: 'PayPage',
  data() {
    return {
      cardList: [
        { id: 1, label: "出生年月", value: "solarDay" },
        { id: 2, label: "四柱八字", value: "sizhu" },
        { id: 3, label: "所属命宫", value: "mgName" },
        { id: 4, label: "生肖属性", value: "shuXing" },
        { id: 5, label: "所属星座", value: "xingZuo" },
        { id: 6, label: "纳音五行", value: "yearNaYin" },
        { id: 7, label: "基础五行", value: "basicWuxing" },
      ],
      currentMarriageTab: 0,
      pageViewTracker: null,
    };
  },

  computed: {
    ...mapGetters('hehun', ['hehunUserInfo', 'otherHehunUserInfo', 'hehunResultInfo']),
    ...mapGetters('system', ['userCount']),
    // 只显示前三条数据
    displayHehunResultInfo() {
      return this.hehunResultInfo.slice(1, 4);
    },
    // 获取第四条数据作为整体评分
    overallScore() {
      return this.hehunResultInfo[0]?.content || '合婚整体得分97分';
    }
  },

  mounted() {
    // 启动页面浏览埋点计时
    this.pageViewTracker = trackPageView({
      reportKey: '进入八字合婚页',
      reportVal: '浏览',
      pageName: '八字合婚页'
    });
    this.pageViewTracker.start();
    this.getInitData()
    // 数据加载完成后显示悬浮图片
    this.$nextTick(() => {
      this.$refs.floatingImage.show();
    });
  },

  onHide() {
    if (this.pageViewTracker) this.pageViewTracker.stop();
  },

  onUnload() {
    if (this.pageViewTracker) this.pageViewTracker.stop();
  },

  methods: {
    ...mapActions('hehun', ['setHehunResultInfo', 'setOtherHehunUserInfo']),
    async getInitData() {
      try {
        const [res1, res2] = await Promise.all([getHehunResultInfo(), getHehunUserInfo()]);
        this.setHehunResultInfo(res1.data)
        this.setOtherHehunUserInfo(res2.data)
      } catch (error) {
        console.error('获取数据失败:', error);
        this.$show.showToast('数据加载失败，请稍后再试');
      }
    },
    // 切换婚姻透视tab
    changeMarriageTab(index) {
      this.currentMarriageTab = index;
    },
    handleReport() {
      uni.navigateTo({
        url: '/pages/payResult/report',
      });
    },
    handleBack() {
      uni.navigateTo({
        url: '/pages/payResult/report',
      });
    },

  },
};
</script>

<style lang="scss" scoped>
@import "./hehun.scss";
</style>